<template>
	<view class="content">
		<view class="book-select">
			<view class="book-info">
				<view class="info-title">填写预约信息</view>
				<view class="book-time">
					可预约时间段：2024年10月29日-2024年11月3日<br>
					工作日：15:00 - 22:00<br>
					周末：12:00 - 22:00<br>
					可预约场次：4
				</view>
			</view>
			<view class="splitor flex-center">
				<image class="right" src="../../static/book/right.png"></image>
				<view class="points">......</view>
				<view class="point"></view>
			</view>
			<view class="select-time">
				<view class="date-part">
					<view class="date-item flex-center" v-for="(item, index) in days" :key="index"
						@click="switchDate(item, index)">
						<view class="week">{{ item.week }}</view>
						<view class="date flex-center"
							:style="{ background: `${curDayIndex == index ? '#1F1F1F' : '#fff'}`, color: `${curDayIndex == index ? '#fff' : '#1F1F1F'}` }">
							{{ item.date }}</view>
					</view>
				</view>
				<view class="time-part">
					<view class="time" :class="curTimeIndex == index && 'time-selected'"
						:style="{ backgroundColor: isBan && curTimeIndex !== index && item.real_book <= item.can_book ? 'rgba(0,0,0,0.1)' : '#fff' }"
						v-for="(item, index) in curTimes" :key="index" @click="switchTime(item, index)">
						{{ item.time }}</view>
					<view class="time" style="border: none;" v-if="curTimes.length % 3 !== 0"></view>
				</view>
			</view>
			<view class="tips">
				注：每人最多可以预约4次，每天1次<br>过时将会作废，需重新预约或者现场排队<br>进入后可以长时间停留游玩，但离开后再进入需重新排队；每个时间段可以开放3000人次预约入场过号重新预约或者现场排队
			</view>
			<view style="height: 82px">
				<button class="black-btn" @click="next" :class="isBan && 'book-ban'">{{ isBan ? '已有预约' : '确认预约'
					}}</button>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState,
	mapActions
} from 'vuex';
import { textJoinDay } from '../../utils/formateTime.js';
import { bookState } from '../../utils/stateEnum';

export default {
	data() {
		return {
			days: [],
			curDayIndex: 0,
			curTimeIndex: -1,
			curTimes: [],
			isBan: false,//是否禁止选时间
		}
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo, // 确保这里引用正确
			bookList: state => state.book.bookList,
		}),
	},
	watch: {
		curDayIndex(newV) {
			console.log('监听curDayIndex', newV);
			this.initCurTimeIndex();
		}
	},
	onLoad() {
		this.getBookList().then(async () => {
			await this.initBookTime();
			this.initCurTimeIndex();
		});
	},
	onShow() {
		this.getBookList().then(async () => {
			await this.initBookTime();
			this.initCurTimeIndex();
		});
	},
	methods: {
		...mapActions(['getBookList',]),
		textJoinDay,//注册导入方法
		initCurTimeIndex() {
			let alldate = this.days[this.curDayIndex]?.alldate;
			this.isBan = false;
			this.bookList.forEach(element => {
				if (element.status !== bookState.CANCELLED) {
					// 取消预约后预约次数返还,其他状态不能再返还
					let dateTemp = element.date;
					if (dateTemp.includes('-')) {
						// 统一时间格式
						dateTemp = this.textJinDay(dateTemp);
					}
					if (dateTemp == alldate) {
						this.isBan = true;
					}
				}
			});

			console.log('initCurTimeIndex', this.bookList, alldate);
			if (this.isBan) {
				this.curTimeIndex = -1;
			}
		},
		initBookTime() {
			return new Promise((r) => {
				let that = this;
				this.$http.getBookTime().then(res => {
					that.days = [];
					for (const key in res) {
						if (res.hasOwnProperty(key)) { // 确保键是对象自身的属性，而不是原型链上的属性
							const value = res[key];
							// key 字符串格式：2024年10月31日
							const date = new Date(key.replace(/年/g, '-').replace(/月/g, '-').replace(/日/g, ''));
							// console.log(value, key, date);
							that.days.push({
								week: this.getWeek(date.getDay()),
								date: `${date.getMonth() + 1}/${date.getDate()}`,
								alldate: `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`,
								times: value,
							});
						}
					}
					that.curTimes = that.days[that.curDayIndex].times
					console.log('initBookTime', res, that.days);
					r(that.days)
				})
			})
		},
		initDays() {
			this.days = [];
			for (let i = 0; i <= 5; i++) {
				const date = new Date(2024, 9, 29, 11, 0, 0);// 注意月份是从0开始的，所以11代表12月
				date.setDate(date.getDate() + i);
				this.days.push({
					week: this.getWeek(date.getDay()),
					date: `${date.getMonth() + 1}/${date.getDate()}`,
					alldate: `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`,
				});
			}
		},
		getWeek(val) {
			switch (val) {
				case 1:
					return '周一';
				case 2:
					return '周二';
				case 3:
					return '周三';
				case 4:
					return '周四';
				case 5:
					return '周五';
				case 6:
					return '周六';
				case 0:
					return '周日';
			}
		},
		next() {
			if (this.isBan) return;
			const bookParams = {
				date: this.days[this.curDayIndex]?.alldate,
				time: this.curTimes[this.curTimeIndex].time,
				address: "上海市静安区南京西路永源浜"
			};
			console.log(this.userInfo, bookParams);
			if (bookParams.date && bookParams.time) {
				this.$http.createBook(bookParams).then((res) => {
					console.log('预约结果', res);
					if (res?.errmsg) {
						wx.showToast({
							title: res.errmsg,
							icon: 'fail',
							duration: 2000
						})
					} else {
						uni.navigateTo({
							url: '/packageA/bookDetail/bookDetail?bookId=' + res.id + '&type=new'
						});
					}
				})
			}
		},
		switchDate(item, index) {
			this.curDayIndex = index;
			this.curTimes = this.days[this.curDayIndex].times;
			console.log('switchDate', item, this.curTimes);
		},
		switchTime(item, index) {
			if (this.isBan) return;
			if (this.curTimeIndex == index) {
				this.curTimeIndex = -1;
			} else {
				this.curTimeIndex = index;
			}
			console.log('switchTime', item, this.curTimes[this.curTimeIndex]);
		}
	}
}
</script>

<style lang="scss" scoped>
.book-select {
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
}

.book-info {
	width: auto;
	padding: 0 18px;
	margin-top: 20px;

	.info-title {
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 20px;
	}

	.book-time {
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 1px;
		color: $tip2-color;
	}
}

.splitor {
	width: auto;
	padding: 0 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px 0;

	.right {
		width: 10px;
		height: 10px;
		margin: 0 12px;
	}

	.point {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		border: 1px solid $primary-color;
		background: $primary-color;

		margin: 0 12px;
	}

	.points {
		position: relative;
		bottom: 5px;
		color: $tip2-color;
	}
}

.select-time {
	display: block;
	width: auto;
	padding: 0 18px 20px 18px;
	position: relative;
	overflow: hidden;

	.date-part {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 18px;

		.date-item {
			flex-direction: column;
			margin-bottom: 20px;

			.week {
				font-size: 12px;
				margin-bottom: 7px;
			}

			.date {
				width: 43px;
				height: 43px;
				border-radius: 50%;
				font-size: 12px;
			}
		}

	}

	.time-part {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.time {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 30%;
			height: 44px;
			border: 1px solid $tip2-color;
			font-size: 14px;
			color: $tip-color;
			margin-bottom: 8px;
		}

		.time-selected {
			border: 1px solid $primary-color;
			background: $primary-color !important;
			color: #fff;
		}
	}

	&::after {
		content: '';
		width: calc(100% - 42px);
		height: 1px;
		background-color: $tip2-color;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0.5;
	}
}

.tips {
	width: auto;
	padding: 0 18px;
	margin-top: 20px;
	margin-bottom: 46px;
	font-size: 12px;
	letter-spacing: 0.8px;
	color: $tip2-color;
}

.book-ban {
	background: rgba(0, 0, 0, 0.1);
	color: $tip-color;
	border: 1px solid $tip2-color;
}
</style>
